<div class="innerbanner">
    <img src="/static/picture/con_banner.jpg" alt="">
    <div class="text icenter3">
        <h3 aos="fade-up">Honor</h3>
        <h4 aos="fade-up">荣誉资质</h4>
    </div>
</div>

<script>
    $(window).scroll(function () {
        scroll = $(document).scrollTop();
        bai = 1 + scroll / $(document).height()
        $(".innerbanner img").css("transform", "scale(" + bai + ")")
    })
</script>

<div class="imgshowmask">
    <div class="imgshow" id="imgshow">
        <p><img src="" id="bigimg"> </p>
    </div>
</div>

<script>
    $(function () {
        $(".honor04 .box").click(function () {
            var src = $(this).find(".imgbox .con img").attr("src");
            $("#bigimg").attr("src", src);
            $(".imgshowmask").fadeIn();
        });
        $(document).mousedown(function (e) {
            if ($(e.target).parent(".imgshowmask").length == 0) {
                $(".imgshowmask").fadeOut(); //点击关闭按钮关闭暂停视频
            }
        })
    })
</script>

<div class="fx">
    <div class="com_nav">
        <div class="icenter3" aos="fade-up">
            <div class="le">
                Company Credential
            </div>
            <div class="ri">
                <a href="/about.html">Company Profile</a>
                <a href="/development.html">R&D Capability</a>
                <a class="active">Company Credential</a>
                <a href="/factory.html">Production Factory</a>
            </div>
        </div>
    </div>

    <style>
        .honor-con-box {
            width: 100%;
            margin: auto;
            position: relative;
            padding-top: 30px;
            overflow: hidden;
        }

        .honor-con-box h3 {
            color: #333;
            font-size: 32px;
        }

        .col-md-3 {
            width: 25%;
            position: relative;
            min-height: 1px;
            padding-right: 15px;
            padding-left: 15px;
            float: left;
        }

        @media screen and (max-width: 992px) {
            .col-md-3 {
                width: 33%;
            }
        }

        @media screen and (max-width: 768px) {
            .col-md-3 {
                width: 47%;
            }
        }
    </style>
    <!-- honor01 -->
    <div class="honor01" aos="fade-up">
        <div class="icenter3">
            <h3 class="solu_h3">Company Credential</h3>
            <?php
                $honorList = \app\model\Honor::queryListGroup();
            ?>
            {foreach $honorList as $value}
            <div class="honor-con-box">
                <h3>{$value.name}</h3>
                {foreach $value->list as $val}
                <div class="col-md-3">
                    <div class="imgs" style="margin-top: 10px;"><img src="/static/images/loading.png" data-original="{$val.picture}"  class="lazyload"></div>
                </div>
                {/foreach}
            </div>
            {/foreach}
        </div>
    </div>

    <!-- honor02 -->
    <div class="honor02" aos="fade-up">
        <div class="imgbox"><img src="/static/picture/honor_01.jpg" alt=""></div>
        <div class="icenter3">
            <!-- <div class="wen">Innovative</div> -->
            <h3>Innovation Achievements</h3>
            <div class="bot">
                <ul class="honorCount">
                    <li>
                        <h4><strong class="honornum" data-startval="0" data-endval="100" data-speed="2"
                                data-decimals="0" id="honornum-1">100</strong><strong>+</strong></h4>
                        <div class="ri">
                            <h5>Intellectual Property Right</h5>
                            <h6>We have over 100 intellectual property rights related to high-performance functional materials, covering materials, equipment, processes, and software.</h6>
                        </div>
                    </li>
                    <li>
                        <h4><strong class="honornum" data-startval="0" data-endval="10" data-speed="2" data-decimals="0"
                                id="honornum-2">10</strong><strong>+</strong></h4>
                        <div class="ri">
                            <h5>Technical Standard</h5>
                            <h6>Develop more than 10 national, industry, and group standards</h6>
                        </div>
                    </li>
                    <li>
                        <h4><strong class="honornum" data-startval="0" data-endval="20" data-speed="2" data-decimals="0"
                                id="honornum-3">20</strong><strong>+</strong></h4>
                        <div class="ri">
                            <h5>Innovation Awards</h5>
                            <h6>Received over 10 awards in product and scientific research innovation</h6>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        //关于我们
        var winH = $(window).height();
        var winW = $(window).width();
        var widScrollT = 0
        var c1 = 0;

        // $(window).resize(function () {
        //     winH = $(window).height();
        //     winW = $(window).width();
        //     widScrollT = $(window).scrollTop();
        // })
        //运动函数-滚动触发（元素起始位置，元素结束位置，运动起始位置，运动结束位置）
        // var sMoveFun = function (oStart, oEnd, sStart, sEnd) {
        //     var ret;
        //     if (widScrollT >= sStart && widScrollT <= sEnd) {//运行过程中
        //         ret = oStart + (oEnd - oStart) / (sEnd - sStart) * (widScrollT - sStart)
        //     } else if (widScrollT < sStart) {//进入之前
        //         ret = oStart
        //     } else if (widScrollT > sEnd) {//离开之后
        //         ret = oEnd
        //     }
        //     return ret;
        // }

        // $(window).scroll(function () {

        //     widScrollT = $(window).scrollTop();
        //     var boxpart3_s = $(".honor02").offset().top - winH * 0.6
        //     if (widScrollT >= boxpart3_s) {
        //         if ($(window).width() < 1600) {
        //             var boxpart3_t3 = sMoveFun(395, 846, boxpart3_s, boxpart3_s + winH * 1.2);
        //         } else {
        //             var boxpart3_t3 = sMoveFun(565, 1200, boxpart3_s, boxpart3_s + winH * 1.2);
        //         }

        //         $(".honor02 .wen").css("left", boxpart3_t3 + "px");
        //     } else {
        //     }
        // })
    </script>
    <!-- 数字滚动 -->
    <script type="text/javascript">
        $(function () {
            //主动拓展出来的功能
            // let cc_top = $(".index02").offset().top; 
            var countCXArr = [];
            var countCX = function () {
                // let sT1 =$(window).scrollTop();
                $('.honorCount').each(function (i, dom) {
                    //控制上下滑动数字的重置
                    // if(sT1>cc_top-100 || sT1 < 500){  countCXArr[i] = false;}
                    if (countCXArr[i] && countCXArr[i] === true) { return; }
                    var sT;
                    var ncTop;
                    sT = $(window).scrollTop();
                    ncTop = $(dom).offset().top;
                    var id, decimals, startVal, endVal, duration;

                    if ($(window).width() < 760) {
                        return
                    } else {
                        if (sT > ncTop - $(window).height() && sT < ncTop) {
                            $(dom).find('.honornum').each(function () {
                                id = $(this).attr('id');
                                decimals = $(this).attr('data-decimals'),
                                    startVal = $(this).attr('data-startVal'),
                                    endVal = $(this).attr('data-endVal'),
                                    duration = $(this).attr('data-speed');

                                new CountUp(id, startVal, endVal, decimals, duration, {
                                    useEasing: true,
                                    separator: ''
                                }).start();
                                countCXArr[i] = true;
                            })
                        }
                    }
                })
            }
            countCX();
            $(window).on("scroll", function () {
                countCX();
            })
        });
    </script>
</div>

<script src="/static/js/lazyload.js"></script>
<script>
    $(document).ready(function () {
        // 图片懒加载
        jQuery("img.lazyload").lazyload();
});
</script>
